/*
 * Created by DuHuiling on 2017/2/23.
 */
/**
 * Textarea组件
 * @class Textarea
 * @extends Basic
 *
 * @param [className] 类名
 * @param value value值
 * @param [rows] 行数
 * @param [cols] 列数
 * @param {function} onChange 点击事件
 * @param {function} onFocus 获取焦点事件
 * @param {function} onBlur 失去焦点事件
 *
 * 示例:
 *
 *     @example
 *     <Textarea placeholder="default" id="name"  value="333" onChange={this.onchange}/>
 */
var Textarea = React.createClass({
    config:{
        id:"",
        value:"",
        className:"",
        rows:5,
        cols:20,
        placeholder:"这是文本域",
        onFocus: function () {
        },
        onBlur: function () {
        }
    },
    onChange:function(){
        if(this.props.onChange){
            this.props.onChange();
        }
    },
    _onFocus: function (e) {
        var _nodeInput = e.target || e.srcElement,
            _nodeSpan = _nodeInput.nextSibling;
        if (_nodeSpan.className == "ucs-placeholder") {
            _nodeSpan.className = "ucs-placeholder hide";
        }
        this.props.onFocus && this.props.onFocus();
    },
    _handle: function (e) {
        var _nodeSpan = e.target || e.srcElement,
            _node = _nodeSpan.parentNode,
            _nodeInput = _node.firstChild;
        if (_nodeSpan.className == "ucs-placeholder") {
            _nodeSpan.className = "ucs-placeholder hide";
        }
        _nodeInput.focus();
    },
    _placeholder: function (_this) {
        if (!('placeholder' in document.createElement('input'))) {
            return (
                <span className="ucs-placeholder" onClick={_this._handle}>{_this.props.value ? _this.props.value : _this.props.placeholder}</span>
            );
        } else {
            return "";
        }
    },
    _onBlur: function (e) {
        if (!('placeholder' in document.createElement('input'))) {
            var _nodeInput = e.target || e.srcElement,
                _node = _nodeInput.parentNode,
                _nodeSpan = _node.lastChild;
            if (!_nodeInput.value) {
                _nodeSpan.className = "ucs-placeholder";
                _nodeSpan.innerHTML = this.props.placeholder;
            }
        }
        this.props.onBlur && this.props.onBlur();
    },
    render:function(){
        for(var key in this.props){
            this.config[key] = this.props[key];
        }
        return(
            <div className="ucs-textarea-control">
                <textarea
                    id = {this.config.id}
                    className = {"ucs-textarea " + this.config.className}
                    rows = {this.config.rows}
                    cols = {this.config.cols}
                    onchange = {this.onChange.bind(this)}
                    placeholder = {this.config.placeholder}
                    onfocus={this._onFocus.bind(this)}
                    onblur={this._onBlur.bind(this)}
                >
                    {this.config.value}
                </textarea>
                {this._placeholder(this)}
            </div>
        )
    }
});
module.exports = Textarea;